<template>
  <div class="parameter-config-container">
    <el-page-header :icon="null" title="返回" @back="goBack">
      <template #content>
        <div class="flex items-center">
          <el-icon class="mr-2"><Setting /></el-icon>
          <span class="text-large font-600 mr-3"> 联邦学习参数配置 </span>
        </div>
      </template>
    </el-page-header>

    <el-card class="config-card">
      <el-tabs v-model="activeTab">
        <!-- 基础参数配置 -->
        <el-tab-pane label="基础参数" name="basic">
          <el-form :model="form" label-width="180px" label-position="left">
            <el-form-item label="联邦学习算法">
              <el-select v-model="form.algorithm" placeholder="请选择算法">
                <el-option
                    v-for="item in algorithmOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="训练轮数">
              <el-input-number
                  v-model="form.epochs"
                  :min="1"
                  :max="1000"
                  controls-position="right"
              />
              <span class="tip-text"> (建议值: 10-500) </span>
            </el-form-item>

            <el-form-item label="本地训练轮数">
              <el-input-number
                  v-model="form.localEpochs"
                  :min="1"
                  :max="20"
                  controls-position="right"
              />
              <span class="tip-text"> (每轮联邦聚合前的本地训练次数) </span>
            </el-form-item>

            <el-form-item label="批量大小">
              <el-input-number
                  v-model="form.batchSize"
                  :min="8"
                  :max="1024"
                  controls-position="right"
              />
              <span class="tip-text"> (建议值: 32-256) </span>
            </el-form-item>

            <el-form-item label="学习率">
              <el-input-number
                  v-model="form.learningRate"
                  :min="0.0001"
                  :max="1"
                  :step="0.0001"
                  controls-position="right"
              />
              <span class="tip-text"> (建议值: 0.001-0.1) </span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 高级参数配置 -->
        <el-tab-pane label="高级参数" name="advanced">
          <el-form :model="form" label-width="180px" label-position="left">
            <el-form-item label="聚合算法">
              <el-select v-model="form.aggregation" placeholder="请选择聚合算法">
                <el-option
                    v-for="item in aggregationOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="参与节点最小数量">
              <el-input-number
                  v-model="form.minClients"
                  :min="1"
                  :max="100"
                  controls-position="right"
              />
            </el-form-item>

            <el-form-item label="差分隐私">
              <el-switch v-model="form.differentialPrivacy" />
              <template #extra>
                <div v-if="form.differentialPrivacy" class="privacy-params">
                  <el-form-item label="噪声规模 (σ)">
                    <el-input-number
                        v-model="form.noiseScale"
                        :min="0.1"
                        :max="10"
                        :step="0.1"
                        controls-position="right"
                    />
                  </el-form-item>
                  <el-form-item label="裁剪阈值 (C)">
                    <el-input-number
                        v-model="form.clipThreshold"
                        :min="0.1"
                        :max="10"
                        :step="0.1"
                        controls-position="right"
                    />
                  </el-form-item>
                </div>
              </template>
            </el-form-item>

            <el-form-item label="模型验证频率">
              <el-input-number
                  v-model="form.validationFreq"
                  :min="1"
                  :max="20"
                  controls-position="right"
              />
              <span class="tip-text"> (每多少轮验证一次模型) </span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 资源限制 -->
        <el-tab-pane label="资源限制" name="resource">
          <el-form :model="form" label-width="180px" label-position="left">
            <el-form-item label="CPU限制">
              <el-slider
                  v-model="form.cpuLimit"
                  :min="0.1"
                  :max="8"
                  :step="0.1"
                  show-input
              />
              <span class="tip-text"> (每个参与节点的CPU核数) </span>
            </el-form-item>

            <el-form-item label="内存限制">
              <el-slider
                  v-model="form.memoryLimit"
                  :min="0.5"
                  :max="32"
                  :step="0.5"
                  show-input
              />
              <span class="tip-text"> (每个参与节点的内存GB数) </span>
            </el-form-item>

            <el-form-item label="GPU限制">
              <el-switch v-model="form.useGPU" />
              <template #extra>
                <div v-if="form.useGPU" class="gpu-params">
                  <el-form-item label="GPU数量">
                    <el-input-number
                        v-model="form.gpuCount"
                        :min="1"
                        :max="8"
                        controls-position="right"
                    />
                  </el-form-item>
                  <el-form-item label="显存限制">
                    <el-slider
                        v-model="form.gpuMemory"
                        :min="1"
                        :max="32"
                        :step="1"
                        show-input
                    />
                    <span class="tip-text"> (每个参与节点的显存GB数) </span>
                  </el-form-item>
                </div>
              </template>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div class="form-actions">
        <el-button type="primary" @click="submitForm">保存配置</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="loadDefault">加载默认值</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Setting } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const activeTab = ref('basic')

const form = reactive({
  algorithm: 'fedavg',
  epochs: 100,
  localEpochs: 5,
  batchSize: 32,
  learningRate: 0.01,
  aggregation: 'weighted',
  minClients: 3,
  differentialPrivacy: false,
  noiseScale: 1.0,
  clipThreshold: 1.0,
  validationFreq: 5,
  cpuLimit: 2,
  memoryLimit: 4,
  useGPU: false,
  gpuCount: 1,
  gpuMemory: 8
})

const algorithmOptions = [
  { value: 'fedavg', label: 'FedAvg (默认)' },
  { value: 'fedprox', label: 'FedProx' },
  { value: 'fedsgd', label: 'FedSGD' },
  { value: 'scaffold', label: 'SCAFFOLD' }
]

const aggregationOptions = [
  { value: 'weighted', label: '加权平均 (默认)' },
  { value: 'uniform', label: '均匀平均' },
  { value: 'krum', label: 'Krum (抗拜占庭)' },
  { value: 'median', label: '中位数' }
]

const goBack = () => {
  router.go(-1)
}

const submitForm = () => {
  console.log('提交配置:', form)
  ElMessage.success('参数配置已保存')
  router.push('/')
}

const resetForm = () => {
  Object.assign(form, {
    algorithm: 'fedavg',
    epochs: 100,
    localEpochs: 5,
    batchSize: 32,
    learningRate: 0.01,
    aggregation: 'weighted',
    minClients: 3,
    differentialPrivacy: false,
    noiseScale: 1.0,
    clipThreshold: 1.0,
    validationFreq: 5,
    cpuLimit: 2,
    memoryLimit: 4,
    useGPU: false,
    gpuCount: 1,
    gpuMemory: 8
  })
  ElMessage.info('已重置表单')
}

const loadDefault = () => {
  Object.assign(form, {
    algorithm: 'fedavg',
    epochs: 50,
    localEpochs: 3,
    batchSize: 64,
    learningRate: 0.05,
    aggregation: 'weighted',
    minClients: 2,
    differentialPrivacy: true,
    noiseScale: 0.5,
    clipThreshold: 2.0,
    validationFreq: 3,
    cpuLimit: 1,
    memoryLimit: 2,
    useGPU: true,
    gpuCount: 1,
    gpuMemory: 4
  })
  ElMessage.success('已加载推荐默认值')
}
</script>

<style scoped>
.parameter-config-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.config-card {
  margin-top: 20px;
}

.tip-text {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

.privacy-params,
.gpu-params {
  margin-top: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.form-actions {
  margin-top: 20px;
  text-align: center;
}

.el-form-item {
  margin-bottom: 22px;
}
</style>